<template>
<view class="index_container">
  <!-- 轮播图 -->
  <swiper
    indicator-dots
    autoplay
    circular
    class="banners"
  >
    <swiper-item v-for="item in bannersList" :key="item.src">
      <image
        :src="item.src"
        mode="scaleToFill"
      />
    </swiper-item>
    </swiper>
    <!-- 导航列表 -->
    <view class="nav_list flex">
      <view class="nav_item flex_c" v-for="item in cateList" :key="item.name">
        <image
          :src="item.src"
          mode="scaleToFill"
        />
        <title>{{item.name}}</title>
      </view>
    </view>
    <!-- 卡片内容区 -->
    <view class="card_content_container">
      <v-card title="热门课程" more="全部课程>">
        <v-card-item :list="courseList" type="course"></v-card-item>
      </v-card>
      <v-card title="名师列表" more="全部名师>">
        <v-card-item :list="teacherList" type="teacher"></v-card-item>
      </v-card>
    </view>
    <v-scroll-top></v-scroll-top>
</view>

</template>

<script setup lang="ts">
import {ref} from 'vue'
import {hotCateList,bannerCateList} from '@/common/mock/home'
import {onLoad,onShow,onPageScroll} from '@dcloudio/uni-app'
import serviceCourse from '@/api/course';
import type{containId} from '@/utils/type'
//获取图片数据
const bannersList = ref(bannerCateList);
//获取导航列表数据
const cateList = ref(hotCateList);
//获取到课程的列表数据
const courseList = ref<containId[]>([]);
//拿到老师的列表数据
const teacherList = ref<containId[]>([]);
onLoad(()=>{
  getCourseData();
});
onPageScroll((e)=>{
  // console.log(e.scrollTop);
  uni.$emit('pageScroll',e.scrollTop)
  
})
async function getCourseData(){
    try {
      let result = await serviceCourse.getCourse();
      if(result.code === 200){
        courseList.value = result.data.courseList;
        teacherList.value = result.data.teacherList;
      }
    } catch (error) {
      console.log(error);
    }
}


</script>
<style scoped lang="less">
.index_container{
  .banners{
    width: 100%;
    height: 300rpx;
    image{
      width: 100%;
      height: 100%;
    }
  }
  .nav_list{
    .nav_item{
      width: 20%;
      align-items: center;
      image{
        width: 72rpx;
        height: 72rpx;
        margin: 20rpx 50rpx;
      }
      title{
        font-size: 13px;
        color: #666;
      }
    }
  }
}
</style>ue